<template>
  <div id="comment">
    <textarea v-model="comment" placeholder="发表你的观点"></textarea>
    <mt-button type="primary" size="large" @click="makecomments">发表评论</mt-button>
    <div class="comments">
      <h4 class="c-title">评论信息:</h4>
      <hr>
      <div v-for="(item,index) in list" :key="item.id">
        <div class="title">
            <span>第{{index + 1}} 楼</span>
            <span>用户:{{item.user_name}}</span>
            <span>发表时间: {{item.add_time | datefmt('YYYY-MM-DD')}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import common from '../../kits/common'
import { Toast } from 'mint-ui';
import axios from 'axios'
export default {
  name: 'comment',
  data () {
    return {
      comment:'',
      list:[],
      pageId: 1
    }
  },
  props: ["id"],
  methods: {
    // 发表评论
    makecomments(){
      // 提交评论信息
      axios.post(common.apidomain + "/api/postcomment/:"+this.id,{content:this.comment})
      .then(response=>{
        Toast("评论成功");
        //评论信息显示在页面上
        this.list = this.comment.trim().concat(this.list)
      })
      .catch(error=>{
        console.log(error)
        Toast("提交评论失败")
      })  
    }
  },
  created () {
    // 加载评论信息
    axios.get(common.apidomain + "/api/getcomments/:"+this.id+"?pageindex="+this.pageId)
    .then(response=>{
      // 错误提示
      if(response.data.status != 0) {
        Toast("无法获取评论信息");
        return
      };
      // 获取评论数据
      this.list = response.data.message
    })
   }
}
</script>

<style lang="less">

</style>

